<template>
  <div :class="[leftTopBoxClass]"  class="left-top-box">
      <van-swipe class="my-swipe"  autoplay = '8000' :show-indicators = 'false'>
        <van-swipe-item v-for="(item,index) in resultArray"  :key = index >
          <div class="connect-box">
             <img  v-for="(w) in item"  :src="w.iconUrl ||defaultIcon " :key= 'w.id'  @click='clickActivity(w)'>
          </div>
        </van-swipe-item>
      </van-swipe>
  </div>

</template>

<script>
  export default {
    props:{
    	dataArray:Object,
    },
    data() {
      return {
          resultArray:[],
          leftTopBoxClass:'',
          defaultIcon:require('@/assets/images/active/active-right-bottom.png')
      }
    },
    created(){
         this.resultArray = fun.clearUpArray(this.dataArray,3);
         if(this.dataArray.length==1){
           this.leftTopBoxClass = 'left-Top-Box-first'
         }else if(this.dataArray.length==2){
           this.leftTopBoxClass = 'left-Top-Box-second'
         }else if(this.dataArray.length>=3){
            this.leftTopBoxClass = 'left-Top-Box-three'
         }
    },
    methods: {
      clickActivity(w) {//多个弹出框 一个直接跳转
       fun.activityDotNumFun(0,w.id);
       window.sessionStorage.setItem('activityIconInfo',JSON.stringify(w))
        this.$emit("formChildMsg",{
          type: "activityChildArray",
          data: w,
          loction:'leftTop'
        })
      }
    }
  }
</script>

<style scoped="scoped">
  .connect-box{
    display: flex;
  }
  .connect-box img{
    width: 98px;
    height: 98px;
  }
  .left-top-box{
    width: 106px;
    height: 98px;
    overflow: hidden;
    position: relative;
    z-index: 2;
  }
  .left-Top-Box-first{
    width: 100px;
  }
  .left-Top-Box-second{
   width: 200px;
  }
  .left-Top-Box-three{
    width: 300px;
  }
</style>
